<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="郝珍华">
    <title></title>
    <style>
        .box {
            width: 400px;
            border: 1px solid;
            margin: 100px auto;
        }

        ul {
            height: 40px;
            background-color: black;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .ul li {
            line-height: 40px;
            float: left;
            color: white;
            margin-left: 40px;
        }

        .xuanze {
            color: white;
            background-color: #aaa;
        }

        .nerong {
            margin-left: 230px;
        }

        p {
            margin: 0;
            display: none;
        }

        p:first-child {
            display: block;
        }

        .clearfix::after {
            content: '';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="box">

        <ul class="ul clearfix">
            <li class="xuanze">选项一</li>
            <li>选项二</li>
            <li>选项三</li>
        </ul>


        <div class="nerong">
            <p>内容1<br>内容1</p>
            <p>内容2<br>内容2<br>内容2<br>内容2</p>
            <p>内容3<br>内容3<br>内容3<br>内容3<br>内容3</p>
        </div>
    </div>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $('li').each(function (index) {

        $('li').eq(index).hover(function () {

            $('li').eq(index).css('background-color', '#aaa')
                .siblings().css('background-color', 'transparent')
            $('p').eq(index).css('display', 'block')
                .siblings().css('display', 'none')

        })
    })

</script>